<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>升级版</title>
		<script type="text/javascript" src="/homework/web/base/js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			var id=1;
			function testAdd(){
				var name=$("#name").val();
				var sex=$("input[type='radio']:checked").val();
				var hobby = '';
				$("input[type='checkbox']:checked").each(function() {
					hobby += $(this).val() + ' ';
				});
				var addrss = $("#selid option:checked").val();				
				
				//字符串拼接
				var html=""
				+"<tr id='tr"+id+"'>"
				+"<td id='tda"+id+"'>"+id+"</td>"
				+"<td id='tdb"+id+"'>"+name+"</td>"
				+"<td id='tdc"+id+"'>"+sex+"</td>"
				+"<td id='tde"+id+"'>"+hobby+"</td>"
				+"<td id='tdf"+id+"'>"+addrss+"</td>"
				+"<td id='tdd"+id+"'><a href='javascript:testDel("+id+");'>删除</a><a href='javascript:testUpd("+id+");'>修改</a></td>"
				+"</tr>"
				$("#tbody").append(html);
				id++;
			}
			
			function testDel(vid){
				if(confirm("是否删除该纪录？")){
					$("#tr"+vid).remove();	//删除该行		
					//remove()--自身及后代都会删除
					//empty仅删除后代，自身会保留
			    }
			}
			//修改 1
			function testUpd(vid){
				$("#tdb"+vid).html("<input type='text' id='tName"+vid+"' value='"+$("#tdb"+vid).html()+"'/>")
				$("#tdc"+vid).html("<input type='text' id='tsex"+vid+"'  value='"+$("#tdc"+vid).html()+"'/>")
				$("#tde"+vid).html("<input type='text' id='thobby"+vid+"' value='"+$("#tde"+vid).html()+"'/>")
				$("#tdf"+vid).html("<input type='text' id='taddress"+vid+"' value='"+$("#tdf"+vid).html()+"'/>")
				$("#tdd"+vid).html("<a href='javascript:testSave("+vid+");'>保存</a>")
			}
			//修改 2-保存
			function testSave(vid){
				$("#tdb"+vid).html($("#tName"+vid).val())
				$("#tdc"+vid).html($("#tsex"+vid).val())
				$("#tde"+vid).html($("#thobby"+vid).val())
				$("#tdf"+vid).html($("#taddress"+vid).val())
				$("#tdd"+vid).html("<a href='javascript:testDel("+vid+");'>删除</a><a href='javascript:testUpd("+vid+");'>修改</a>")
			}
			function testSelect(){
				$("tr").css("background-color","");
				//获取搜索框中的值
				var val=$("#name2").val();
				var val2=$("#sel2id").val();
				if(val!='')
				$("tr").each(function(){
					if($(this).find("td[id^='tdb']").text().indexOf(val)>-1){
						$(this).css("background-color","green");
					}
				})
				if(val2!='')
				$("tr").each(function(){
					if($(this).find("td[id^='tdf']").text().indexOf(val2)>-1){
						$(this).css("background-color","green");
					}
				})
			}
		
		</script>
	</head>
	<body>
		<div>
			记录列表<br><br>
			姓名：<input type="text" id='name' placeholder="姓名" /><br><br>
			性别：<input type="radio" name="radio" value="男"/>男
			     <input type="radio" name="radio" value="女"/>女<br><br>
			爱好：<input type="checkbox" name='check' value="跑步" />跑步
			      <input type="checkbox" name='check' value="看书" />看书
		          <input type="checkbox" name='check' value="游泳" />游泳<br><br>
		    地址：<select name='sel' id='selid'>
				      <option value="北京">北京</option>
					  <option value="上海">上海</option>
					  <option value="深圳">深圳</option>
			     </select><br><br>
			<button onclick="testAdd()">添加</button><br><br><br><br>
			姓名：<input type="text" id='name2' placeholder="姓名" />
			地址：<select name='sel2' id='sel2id'>
				      <option value="北京">北京</option>
					  <option value="上海">上海</option>
					  <option value="深圳">深圳</option>
			     </select>
			<button onclick="testSelect()">搜索</button><br><br>
			<table style="border: 1px solid black;width: 600px;">
				<thead>
					<tr>
						<td style="width: 15%">ID</td>
						<td style="width: 20%">姓名</td>
						<td style="width: 10%">性别</td>
						<td style="width: 20%">爱好</td>
						<td style="width: 10%">地址</td>
						<td style="width: 40%">操作</td>
					</tr>
				</thead>
				<tbody id="tbody"></tbody>
			</table>
			
			
		</div>
	</body>
</html>
